/* .vitepress/theme/custom.css */
@require './styles/vf-button.styl'
@require './styles/vf-input.styl'
@require './styles/vf-checkBox.styl'
@require './styles/icons.styl'

:root {
  --vs-primary: 25, 91, 255;
  --vs-warn: 255, 186, 0;
  --vs-danger: 255, 71, 87;
  --vs-success: 70, 201, 58;
  --vs-dark: 30, 30, 30;
  --vs-light: 244, 247, 248;
  --vs-color: 17, 18, 20;
  --vs-facebook: 59, 89, 153;
  --vs-twitter: 29, 161, 242;
  --vs-youtube: 255, 0, 0;
  --vs-pinterest: 189, 8, 28;
  --vs-linkedin: 0, 119, 181;
  --vs-snapchat: 255, 252, 0;
  --vs-whatsapp: 37, 211, 102;
  --vs-tumblr: 54, 70, 93;
  --vs-reddit: 255, 69, 0;
  --vs-spotify: 30, 215, 96;
  --vs-amazon: 255, 153, 0;
  --vs-medium: 2, 184, 117;
  --vs-vimeo: 26, 183, 234;
  --vs-skype: 0, 175, 240;
  --vs-dribbble: 234, 76, 137;
  --vs-slack: 74, 21, 75;
  --vs-yahoo: 67, 2, 151;
  --vs-twitch: 100, 65, 164;
  --vs-gitee: 114, 137, 218;
  --vs-telegram: 0, 136, 204;
  --vs-google-plus: 219, 68, 55;
  --vs-messenger: 0, 132, 255;
  --vs-background: 255, 255, 255;
  --vs-text: 44, 62, 80;
  --vs-gray-1: 249, 252, 253;
  --vs-gray-2: 244, 247, 248;
  --vs-gray-3: 240, 243, 244;
  --vs-gray-4: 230, 233, 234;

  --vs-shadow-opacity: .05;
  --vs-radius: 20px;
  --vs-zindex-1: 100000;
  --vs-zindex-2: 99000;
  --vs-zindex-3: 98000;
  --vs-zindex-4: 97000;
  --vs-background-opacity: .2

  --vs-color-rotate: var(--vs-primary);
  --vs-color-darken: var(--vs-primary);
  --vs-button-padding: 8px 12px;
  --vs-button-margin: 5px;
  --vs-button-border-radius: 12px;
  --vs-button-text-color: #fff;

  --vp-code-block-bg: var(--vs-theme-code);
  --vp-code-tag-color: #e2777a;

  --shiki-light: #e2777a!important;
  --shiki-dark: #9CCFD8!important;
}

[class*="--default"], [class*="--primary"] {
  --vs-color: var(--vs-primary)
}

[class*="--danger"] {
  --vs-color: var(--vs-danger)
}

[class*="--success"] {
  --vs-color: var(--vs-success)
}

[class*="--dark"] {
  --vs-color: var(--vs-dark)
}

[class*="--warn"] {
  --vs-color: var(--vs-warn)
}

@font-face
  font-family: "Poppins"
  src: url("/Poppins/Poppins-Regular.ttf")
  font-weight: 400
  font-style: normal

.fade-enter-active, .fade-leave-active
  transition: opacity .5s ease

.fade-enter, .fade-leave-to
  opacity: 0

:root
  --vs-primary: 26, 92, 255
  --vs-theme-bg: #f4f7f8
  --vs-theme-color: #2c3e50
  --vs-theme-layout: #fff
  --vs-theme-bg2: #eef2f5
  --vs-theme-code: #3f3d56
  --vs-theme-code2: #363449

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: block
  background: getVar(theme-layout)
}

*::-webkit-scrollbar-thumb {
  // background: darken(#f5f7fb, 15%);
  // background: darken(#f5f7fb, 15%);
  background: getVar(theme-color)
  border-radius: 5px;
}

::selection
  background: alpha(#2564ff, .15)

.vs-remove-transition
  *, *:after, *:before
    transition: all 0s !important

.all-transition
  *
    transition: all 0s !important

.has-darken
  display none

.darken
  .fei-message__content{
    color: var(--vs-theme-code);
  }
  .data
    background: rgba(0, 0, 0, .3) !important

  .has-darken
    display block

  .not-darken
    display none

.center
  display: flex
  align-items: center
  justify-content: center
  padding: 20px
  flex-wrap: wrap

// vs-clipboard

getColor(colorx, alpha = 1)
  unquote("rgba(var(--" + colorx + "), " +alpha + ")")


getVar(var)
  unquote("var(--vs-" + var + ")")

// .darken
//   .vs-loading:not(.vs-loading--background)
//     background: getVar(theme-layout)

.vs-clipboard
  opacity 0
  position fixed
  bottom 0px
  right 0px
  pointer-events: none

box-icon
  fill getVar(theme-color)

  g
    fill getVar(theme-color)

.hidden-sidebar
  .config
    left 0px !important

    .hidden-sidebar-hidden
      display: none

    .visible-sidebar-hidden
      display: block

  .sidebar
    transform: translate(-100%) !important

  .page, .docs-home
    margin-left: 0px !important
    width 100%

    .sidebar
      transform: translate(0%) !important

html, body
  padding 0
  margin 0
  // background-color #f4f7f8
  background-color: getVar(theme-layout)
  // background-color getVar(theme-bg) !important
  color getVar(theme-color) !important
  scroll-behavior: smooth;

body
  font-family "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px

input
  font-family "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

button
  font-family "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

*
  box-sizing: border-box
  outline: none
  -webkit-tap-highlight-color: transparent

.page
  margin-left 260px
  padding-left: 0px !important
  background-color getVar(theme-bg) !important

.navbar
  position fixed
  z-index 2000
  top 0
  right 0px
  left: auto
  height auto
  background-color getVar(theme-layout)
  box-sizing border-box
  border-bottom 0px !important
  width: 100%

.sidebar-mask
  position fixed
  z-index 10000
  top 0
  left 0
  width 100vw
  height 100vh
  display none
  background: rgba(0, 0, 0, .3)

.sidebar
  font-size 16px
  background getVar(theme-layout)
  width 260px
  position fixed
  z-index 10
  margin 0
  top 57px
  left 0
  bottom 0
  box-sizing border-box
  border-right 0px
  overflow-y auto

//.content:not(.custom)
//  @extend $wrapper
//  > *:first-child
//    margin-top $navbarHeight
//  a:hover
//    text-decoration underline
//  p.demo
//    padding 1rem 1.5rem
//    border 1px solid #ddd
//    border-radius 4px
//  img
//    max-width 100%
//
//.content.custom
//  padding 0
//  margin 0
//  img
//    max-width 100%

a
  font-weight 500
  color getVar(theme-color) !important
  text-decoration none

p a code
  font-weight 400
  color getVar(theme-color)

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size .9rem
  color #999
  border-left .5rem solid #dfe2e5
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem

  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25 !important
  //.content:not(.custom) > &
  //  margin-top (0.5rem - $navbarHeight)
  //  padding-top ($navbarHeight + 1rem)
  //  margin-bottom 0
  //  &:first-child
  //    margin-top -1.5rem
  //    margin-bottom 1rem
  //    + p, + pre, + .custom-block
  //      margin-top 2rem

  &:hover .header-anchor
    opacity: 1

h1
  font-size 2.2rem

h2
  font-size 1.5rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor
  font-weight: 600

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0

  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColor

table
  border-collapse collapse
  margin 1rem 0
  overflow-x: auto

tr
  border-top 1px solid #dfe2e5

  &:nth-child(2n)
    background-color transparent

th, td
  border 1px solid #dfe2e5
  padding .6em 1em

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block

  &.no-navbar
    .content:not(.custom) > h1, h2, h3, h4, h5, h6
      margin-top 1.5rem
      padding-top 0

    .sidebar
      top 0

.no-sidebar
  .navbar
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .1)

  .navbar.fixed
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .04)





@media (min-width: 1000px)
  .theme-container.no-sidebar
    .sidebar
      display none

    .page
      padding-left 0


